<style scoped>
.app_outer{width: 100%;height: 100%;position: relative;padding-left: 380px;background: #fff;border-radius: 8px;}
.app_outer.is_del{padding-left: 0;}
.display{position: absolute;left: 10px;top: 0;height: 100%;background: #fff;padding: 10px 0;}
.app_outer.is_del .display{display: none;}

.phone-outer{box-sizing: border-box;width: 360px;height: 100%;border: 10px solid #000;border-radius: 20px;overflow: hidden;}

.phone-content{position: relative;font-size: 12px;width: 100%;overflow: auto;background-color: var(--bg);}
.phone-content::-webkit-scrollbar{display: none;}
.phone-content>.card_list{width: 100%;min-height: 100%;}
.phone-content .card_row{position: relative;width: 100%;margin-bottom: 10px;border: 1px solid var(--bg);}
.phone-content .card_row:hover{border-color: var(--el-color-primary-light-3);}
.phone-content .card_row .disabled{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: var(--fail);opacity: 0.5;}

.phone-content .footer{position: sticky;width: 100%;z-index: 9;bottom: 0;left: 0;background: #fff;border-top: 1px solid #eee;overflow: hidden;}
.phone-content .footer .inner{width: 100%;justify-content: space-between;}
.phone-content .footer .inner>.footer_row{font-size: 12px;text-align: center;}
.phone-content .footer .inner>.footer_row i{font-size: 22px !important;}
</style>
<template>
  <div class="flex app_outer" :class="{is_del: $get('is_del')}">
    <div class="display">
      <div class="phone-outer flex" style="flex-direction: column;">
        <img src="@/assets/img/phone-head.png" style="width: 100%;">
        <div class="phone-content max">
          <div class="card_list">
            <template v-for="row in data_list">
              <el-popover trigger="hover" placement="right" :width="60" v-if="row.list">
                <template #reference>
                  <div class="card_row" @mouseover="hover_id=row.id" @mouseout="hover_id=0">
                    <component :is="'type_'+row.type" v-bind="row"></component>
                    <div class="disabled" v-if="row.status==0"></div>
                  </div>
                </template>
                <div class="flex">
                  <el-button v-if="in_right_admin('IndexCard/edit')" @click.stop="to_edit(row)" circle type="primary"><i ico="s94" class="ico-edit"></i></el-button>
                </div>
              </el-popover>
            </template>
          </div>

          <div class="footer">
            <el-popover trigger="hover" placement="right" :width="60">
              <template #reference>
                <div class="inner flex" style="min-height: 50px;">
                  <div class="footer_row" v-for="row in footer">
                    <iconfont :value="row.icon" :is_info="true"></iconfont>
                    <p>{{row.title}}</p>
                  </div>
                </div>
              </template>
              <div class="flex">
                <el-button v-if="in_right_admin('ConfigGroup/edit_value')" @click.stop="iframe('/config_group/edit_value?key=page.link.bottom_link')" circle type="primary"><i ico="s94" class="ico-edit"></i></el-button>
              </div>
            </el-popover>
          </div>

        </div>
      </div>
    </div>

    <list_url ref="list_url" :config="config" :row_class="row_class" style="flex-shrink: 1;">
      <template #action="{row}">
        <el-button @click="to_edit(row)" size="small">详情</el-button>
      </template>
    </list_url>
  </div>
</template>
<script>
import type_0 from "@/components/index_card/type_0.vue";
import type_1 from "@/components/index_card/type_1.vue";
import type_2 from "@/components/index_card/type_2.vue";
import type_3 from "@/components/index_card/type_3.vue";
import type_4 from "@/components/index_card/type_4.vue";
import type_5 from "@/components/index_card/type_5.vue";
import type_6 from "@/components/index_card/type_6.vue";
import type_7 from "@/components/index_card/type_7.vue";
import type_8 from "@/components/index_card/type_8.vue";
import type_9 from "@/components/index_card/type_9.vue";
import type_10 from "@/components/index_card/type_10.vue";
import {iframe, in_right_admin} from "@/js/tool.js";
import {_config, decode_config} from "@/js/s94_tool.js";
import s94Mjs from "s94-js";
import {ajax} from "@/js/api_tool.js";
import iconfont from "@/components/auto_import/UnifyParam/iconfont.vue";
export default {
  props: ['__iframe'],
  components: {iconfont, type_0, type_1, type_2, type_3, type_4, type_5, type_6, type_7, type_8, type_9, type_10},
  data(){
    let app = this, btns = {}, is_del = this.$get('is_del');
    if(in_right_admin('IndexCard/add')) btns['添加'] = function(){ iframe('index_card/edit') }
    if(in_right_admin('IndexCard/delete')) btns['彻底删除'] = function(){ app.$refs['list_url'].delete() }

    let type_map = _config('status_alias_map.index_card.type');
    let forms_config = {};
    let list_cols = {
      id: {name:'id', label:'ID', width:'65px', fixed:'left', type: 'hidden'},
      title: {name:'title', label:'板块标题', width: '120px'},
      type: {name:'type', label:'板块类型', width: '120px', type: 'select_one', config:type_map},
      model_name: {name:'model_name',label:'数据模型',type:'select_one',config:[], width: '120px'},
      object_ids: {name:'object_ids', label:'项目id集'},
      href: {name:'href', label:'跳转链接'},
      sort: {name:'sort', label:'排序', type:'text_one', config:'number', width: '60px', can_edit:true, onchange:this.edit},
      status: {name:'status', label:'状态', type:'radio_switch', config:['禁用','启用'], width: '80px', can_edit:true, onchange:this.edit},
    };
    if (is_del){
      list_cols['delete_time'] = {name:'delete_time', label:'删除时间', width:'165px', type:'datetime'};
    }else {
      list_cols['create_time'] = {name:'create_time', label:'创建时间', width:'165px'};
    }
    list_cols['action'] = {name:'action', label:'操作', width:'80px', type:'action', fixed:'right'};

    return {
      btns: [],
      config: {
        api: '/admin/index_card/'+(is_del?'recycle':'list'),
        title: "首页板块"+(is_del?'(已删除)':''),
        btns: btns,
        forms_config: forms_config,
        list_cols: list_cols,
        resdata: function(list){
          app.data_list = list;
          return list;
        },
      },
      data_list: [],
      hover_id: 0,
      footer: [],
    }
  },
  methods: {
    iframe: iframe,
    in_right_admin: in_right_admin,
    to_edit(row){
      let can_edit = in_right_admin('IndexCard/edit') && ~[0,row.tenant_id].indexOf(_config('this_tenant.id'))
      let param = {
        id: row.id,
      }
      if (!can_edit) param['is_info'] = 1;

      iframe('index_card/edit?'+s94Mjs.param_encode(param))
    },
    edit(row,col,v){
      let app = this;
      if(!in_right_admin('IndexCard/edit')) return;
      ajax(`/admin/index_card/edit?id=${row.id}&${col.name}=${v}`, function (res){
        if (res.data>0) app.$refs['list_url'].list();
      })
    },
    row_class(obj){
      return obj.row.id == this.hover_id ? 'primary-row' : '';
    },
    get_config(){
      let app = this;
      ajax({url:'/admin/index_card/config_map',cache:true},function(res){
        let model_name_config = decode_config(res.data.model_list, {content_key:'label', value_key:'name'});
        model_name_config.push({value:'agent', content:'代理商'})
        app.config.list_cols.model_name.config = model_name_config;
        app.footer = res.data.footer;
        return false
      })
    }
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;

    this.get_config();
  }
}
</script>
